import React, { Component } from "react";
import "./css/search_results.css";
import { PlusOutlined } from "@ant-design/icons";
import { Button } from "antd";
import course_logo from "../../assets/courselogo_transparent.png";

// const SearchResults = () => {
//   return (
//     <div>
//       <h3>这是子组件</h3>
//       {/* 在子组件里通过this.props.xx 接收到父组件传过来的值 */}
//       <p>这是父组件传来的值：{this.props.name}</p>
//       <p>这是父组件传来的值：{this.props.age}</p>
//     </div>
//   );
// };

// export default SearchResults;

export default class SearchResults extends Component {
  handle_click = ({ course_url }) => {
    if (course_url !== null && course_url != "") {
      const w = window.open("about:blank");
      w.location.href = course_url;
    }
  };
  render() {
    return (
      <>
        <div className="search_results_item">
          <div className="logo_box">
            <img height="90%" src={course_logo} float="left"></img>
          </div>

          <div className="course_content_box">
            <div className="title_box">
              <a
                onClick={() => {
                  if (
                    this.props.course_url !== null &&
                    this.props.course_url != ""
                  ) {
                    const w = window.open("about:blank");
                    w.location.href = this.props.course_url;
                  }
                  console.log("Add to history.");
                  console.log(this.props.item.course_name);
                  var list = JSON.parse(
                    JSON.parse(JSON.stringify(localStorage.getItem("history")))
                  );
                  if (list == null) {
                    const date = new Date();
                    var newList = [
                      {
                        course_url: this.props.item.course_url,
                        course_name: this.props.item.course_name,
                        date: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`,
                      },
                    ];
                    localStorage.setItem("history", JSON.stringify(newList));
                  } else {
                    const date = new Date();
                    list.unshift({
                      course_url: this.props.item.course_url,
                      course_name: this.props.item.course_name,
                      date: `${date.getFullYear()}-${date.getMonth()}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`,
                    });
                    localStorage.setItem("history", JSON.stringify(list));
                  }
                }}
              >
                <h3>{this.props.item.course_name}</h3>
              </a>
            </div>

            <div
              className="description_box"
              title={this.props.item.course_description}
            >
              <p>
                <font size="1.5" color="#bdbdbd">
                  {this.props.item.course_description}
                </font>
              </p>
            </div>
          </div>

          <div className="tech_add_button">
            <Button
              type="primary"
              shape="circle"
              icon={<PlusOutlined />}
              size="large"
              onClick={(e) => this.props.add(this.props.item)}
            />
          </div>
        </div>
      </>
    );
  }
}
